<template>
  <div class="content">
    <el-form class="option" ref="form" :inline="true" :model="form" label-width="97px">
      <div>
        <el-form-item label="选择时间：">
          <el-date-picker
            @change="selectTimeRange"
            size="mini"
            v-model="form.dataRange"
            type="daterange"
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <el-button plain :type="activeTime===0?'primary':''" size="mini" class="ml10" @click="selectTimeRange(0)">历史全部
          </el-button>
          <el-button plain :type="activeTime===1?'primary':''" size="mini" @click="selectTimeRange(1)">本年度</el-button>
          <el-button plain :type="activeTime===2?'primary':''" size="mini" @click="selectTimeRange(2)">本季度</el-button>
          <el-button plain :type="activeTime===3?'primary':''" size="mini" @click="selectTimeRange(3)">本月</el-button>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="选择事件：">
          <el-checkbox-group v-model="form.events" @change="selectEvents" size="mini">
            <el-checkbox-button :indeterminate="isIndeterminate" v-model="checkAll" @change="selectAllEvent">全选</el-checkbox-button>
            <el-checkbox-button plain v-for="item in events" :label="item.key" :key="item.key">{{item.name}}</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "event",
    data() {
      return {
        activeTime: 3,
        events: [],
        checkAll: false,
        isIndeterminate: false,
        form: {
          dataRange: '',
          events: []
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
      }
    },
    mounted() {
      this.init();

    },
    methods: {
      init(){
        this.events = [];
        const events = this.$kkui.cache.get('dict')['event'];
        for (let key in events) {
          if (key !== '-1') {
            this.events.push({
              key,
              name: events[key].indexOf('-') > -1 ? events[key].split('-')[1] : events[key]
            });
          }
        }
        this.form.events= this.events.map(item=>item.key);
      },
      selectTimeRange(num) {
        this.activeTime = num;
      },
      selectEvents(val) {
        let checkedCount = val.length;
        this.checkAll = checkedCount === this.events.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.events.length;
      },
      selectAllEvent(val){
        this.form.events = val ? this.events.map(item=>item.key) : [];
        this.isIndeterminate = false;
      }
    }
  }
</script>

<style scoped lang="scss">
  .content {
    .left {
      width: 50%;

    }

    .right {
      width: 50%;
    }
  }
</style>
